<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../css/reset.css">
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<style>
		.add-btn{
			width: 150px;
			height: 40px;
			border-radius: 5px;
			color: blue;
			cursor: pointer;
		}
		.content{
			margin-top: 20px;
		}
		.model,.model-xinghao{
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height:100vh;
			background-color: rgba(0,0,0,.2);
			display: none;
		}
		.model-content{
			display: flex;
			position: absolute;
			left: 50%;
			top:50%;
			transform: translate(-17.5vw, -17.5vh);
			width: 35vw;
			height: 25vh;
			background-color: #fff;
			padding: 16px;
			flex-direction: column;
    		align-items: center;
    		justify-content: space-evenly;
		}
		.model-content>div>input{
			width: 80%;
			height: 35px;
			border-radius: 5px;
			border: 1px solid #999;
			padding-left: 10px;
		}
		.model-content>div>button{
			width: 80px;
			height: 35px;
			border-radius: 5px;
			margin-right: 15px;
		}
		.addXingHaoBtn{
			padding: 3px 6px;
			border-radius: 4px;
			color: cadetblue;
		}
	</style>
</head>
<body>
	<div class="add-wrap">
		<button onclick="addPinPai()" class="add-btn">新增品牌</button>
	</div>
	<div class="content">
		<table class="table">
			<tr>
				<th>品牌</th>
				<th>型号</th>
			</tr>
			<tbody id="tbody"></tbody>
			
		</table>
	</div>
	<div class="model">
		<div class="model-content">
			<div>
				<span>品牌: </span>
				<input type="text" class="pinpai-name">
			</div>
			<div><button onclick="closeHidden()">取消</button><button onclick="addP()">新增</button></div>
		</div>
	</div>
	<div class="model-xinghao">
		<div class="model-content">
			<div>
				<span>品牌: </span>
				<span class="atPinPai"></span>
			</div>
			<div>
				<span>型号</span>
				<input type="text" class="xinghao">
			</div>
			<div><button onclick="closeHiddenXinhao()">取消</button><button onclick="addXH()">新增</button></div>
		</div>
	</div>
	<script src="../../public1/js/pubilc.js"></script>
	<script>
		var model = document.querySelector('.model')
		var modelXH = document.querySelector('.model-xinghao')
		var pName = document.querySelector('.pinpai-name')
		var atPName = document.querySelector('.atPinPai')
		var xinghaoValue = document.querySelector('.xinghao')
		var tbody = document.querySelector('#tbody')
		init()
		function addPinPai(){
			model.style.display='block'
		}
		function addP(){
			console.log( pName.value)
			
			if(pName.value){
				xhr({
					url:'/pc/class/addOne',
					methods:'post',
					data:JSON.stringify({
						brand:pName.value
					}),
					success:function(res){
						closeHidden()
						pName.value = ''
						init()
					}
				})
			}else{
				popupMsg('error','请输入品牌名称')
			}
		}
		function init(){
			xhr({
				url:'/pc/class/get',
				success:function(res){
					tbody.innerHTML = ''
					console.log(res)
					for(var i=0;i<res.data.one.length;i++){	
						tbody.innerHTML+=`<tr><td>${res.data.one[i].brand_name}</td><td> ${filterXH(res.data.one[i].Id,res.data.two)} <button class=addXingHaoBtn onclick=addXingHao(${res.data.one[i].Id},'${(res.data.one[i].brand_name)}')>新增型号</button></td></tr>`
					}
				}
			})
		}
		function addXH(){
			if(xinghaoValue.value){
				xhr({
					url:'/pc/class/addTwo',
					methods:'post',
					data:JSON.stringify({
						belong_brand:xinghaoValue.getAttribute('data-id'),
						xinghao_content:xinghaoValue.value
					}),
					success:function(res){
						closeHiddenXinhao()
						init()
					}
				})
			}else{
				popupMsg('error','请输入型号')
			}
		}
		function closeHidden(){
			model.style.display='none'
		}
		function closeHiddenXinhao(){
			modelXH.style.display='none'
			xinghaoValue.removeAttribute('data-id')
		}
		function addXingHao(id,n){
			modelXH.style.display='block'
			atPName.innerHTML=n
			xinghaoValue.setAttribute('data-id',id)
		}

		function filterXH(id,twoObj){
			console.log(id,twoObj)
			var _data_ = []
			var result = twoObj.filter(function(item){
				return item.belong_brand === String(id)
			})
			result.map(function(item){
				_data_.push(item.xinghao_content)
			})
			return _data_.join('、')
		}
	</script>
</body>
</html>